<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<sx:head cache="false" parseContent="true"/>

<link rel="stylesheet" type="text/css" href="css/reserve.css">
<link type="text/css" rel="stylesheet" href="css/standard.css" media="screen">
<link type="text/css" rel="stylesheet" href="css/common.css" media="screen">

<script language="javascript" type="text/javascript" src="js/datevalidate.js"></script>
<script language="javascript" type="text/javascript" src="js/CommonReserve.js"></script>
<script language="javascript" type="text/javascript" src="js/AjaxHandlerUtil.js"></script>
<script language="javascript" type="text/javascript" src="js/NumberFormat154.js"></script>
<script language="javascript" type="text/javascript" src="js/ReservePayment.js"></script>

<script language="javascript">        
</script> 
    
<sx:div id="reservePaymentDIV" loadingText="Loading..." showLoadingText="true" parseContent="true"
		cssStyle="padding-top: 3px; background-image: url(images/top_page_bg.jpg); background-repeat: repeat-x;"
    	separateScripts="true" executeScripts="true" refreshOnShow="true" cssClass="yui-skin-sam">
	
    <s:form id="frmReservePayment" name="frmReservePayment" method="post" theme="simple">
  	<s:token/>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
            <tr>
                <td valign="top" width="100%">
                    <table cellpadding="0" cellspacing="0" border="0" width="98%" align="center">
                    <tr><td height="5"></td></tr>
                    <tr> 
                        <td>
                            <s:actionerror />
                            <s:actionmessage cssStyle="font: bolder;color: blue;" />
                        </td>
                    </tr>
                    <tr><td height="10"></td></tr>
                    <tr>
                        <td colspan="2" style="color: #FFFFFF; padding-left: 5px">
                        	<b>
	                        	<s:label key="reserve.room.payment.group" /> :
								<s:property value="reservePaymentVO.groupInfoVO.groupName"/>
							</b>
                           	<s:hidden id="groupId" name="reservePaymentVO.groupInfoVO.groupId" />
							<s:hidden id="groupName" name="reservePaymentVO.groupInfoVO.groupName" />
	                       	<s:hidden id="groupCode" name="reservePaymentVO.groupInfoVO.groupCode" />
                        </td>
                    </tr>
                   	<tr>
                    	<td align="center" valign="top" colspan="2" style="padding-top: 15px">
                    		<table width="85%">
                   			<tr>
                   				<td style="color: #FFFFFF"><b><s:label key="reserve.room.payment.listforpayment" /></b></td>
                   			</tr>
                    		</table>
                    		<div style="height:200px; width:900px; overflow:scroll;">
                    		<table width="85%" bgcolor="#222222" cellspacing="1">
                   			<tr height="22px" style="background-image: url('images/gradtblhdr.gif')">
                   				<td>&nbsp;</td>
                   				<td align="center"><s:label key="reserve.room.payment.list.no" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.roomno" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.datefromto" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.custname" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.totalamt" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.extraamt" /></td>
                   				<td align="center"><s:label key="reserve.room.payment.list.netamt" /></td>
                   			</tr>
							<tbody id="listTable">		
							<s:iterator value="reservePaymentVO.detailList" status="rows">
							<tr bgcolor="#FFFFFF">
								<td align="center">
									<s:if test="serviceStatus == 'RESERVED'">
										<img alt="" src="${pageContext.request.contextPath}/images/status_R.png">
									</s:if>
									<s:elseif test="serviceStatus == 'BOOKED'">
										<img alt="" src="${pageContext.request.contextPath}/images/status_B.png">
									</s:elseif>
									<s:elseif test="serviceStatus == 'CHECKIN'">
										<img alt="" src="${pageContext.request.contextPath}/images/status_C.png">
									</s:elseif>
									<s:elseif test="serviceStatus == 'CHECKOUT'">
										<img alt="" src="${pageContext.request.contextPath}/images/status_O.png">
									</s:elseif>		
								</td>
								<td align="center"><s:property value="#rows.index+1" /></td>
								<td align="center"><s:property value="roomNo" /></td>
								<td align="center"><s:property value="serviceStartDate" />-<s:property value="serviceEndDate" /></td>
								<td align="center"><s:property value="customerName" /></td>
								<td align="right"><s:property value="totalAmount" /></td>
								<td align="right"><s:property value="extraAmount" /></td>			
								<td align="right"><s:property value="netAmount" /></td>			
								<td style="display:none;"><input type="text" name="detailServiceStatus" value="<s:property value="serviceStatus" />" /></td>								
							</tr>
							</s:iterator>
                   			</tbody>
							<tr class="tHead">
								<td colspan="5" align="right"><s:label key="reserve.room.payment.list.grandtotalamt" /></td>
								<td align="right"><span id="sumTotalAmount"><s:property value="reservePaymentVO.sumTotalAmount" /></span></td>
								<td align="right"><span id="sumExtraAmount"><s:property value="reservePaymentVO.sumExtraAmount" /></span></td>
								<td align="right"><span id="sumNetAmount"><s:property value="reservePaymentVO.sumNetAmount" /></span></td>
							</tr>
                    		</table>
                    		</div>
                    	</td>
                    </tr>
                        <tr><td colspan="2">&nbsp;</td></tr>
                       	<tr>
                        	<td align="center" valign="top" colspan="2">
	                    		<div style="height:200px; width:900px; overflow:scroll;">
                        		<table width="100%">
                       			<tr>
                       				<td align="left"><b><s:label key="reserve.room.payment.inputitle" /></b></td>
                       				<td align="right">
                       					<input type="button" onclick="javascript:addRowPayment()" value=" Add " style="border: 1px solid #222222">
                       				</td>
                       			</tr>
                        		</table>
                        		<table width="100%" bgcolor="#222222" cellspacing="1">
                       			<tr height="22px" style="background-image: url('images/gradtblhdr.gif')">
                       				<td align="center"><s:label key="reserve.room.payment.del" /></td>
                       				<td align="center"><s:label key="reserve.room.payment.no" /><font color="red">*</font></td>
                       				<td align="center"><s:label key="reserve.room.payment.paymethod" /><font color="red">*</font></td>
                       				<td align="center"><s:label key="reserve.room.payment.refno" /></td>
                       				<td align="center"><s:label key="reserve.room.payment.roomno" /></td>
                       				<%--<td align="center"><s:label key="reserve.room.payment.daterange" /></td>--%>
                       				<td align="center"><s:label key="reserve.room.payment.custname" /></td>
                       				<td align="center"><s:label key="reserve.room.payment.amount" /><font color="red">*</font></td>
                       			</tr>
								<tbody id="paymentTable">	
									<s:set id="transId" value="shiftTransId"/>	
									<s:iterator value="reservePaymentVO.paymentMethodList">
									<s:if test="shiftTransId == #transId || #transId == 0">
									<tr bgcolor="#FFFFFF">
										<td align="center"><a onclick="delRowPayment(this)"><img src="./images/calendar/close.gif" /></a></td>
										<td align="center"><s:property value="paymentLineNum" /></td>
										<td align="center">
									        <s:select name="colPaymentMethodId" list="%{paymentMethodList}" value="paymentMethodId" listKey="key" listValue="value" onchange="setDetailIndex(this);validateColPaymentMethod()"/>
										</td>
										<td align="center">
											<input type="text" name="colRefNo" size="10" maxlength="10" value="<s:property value="refNo"/>" onchange="setDetailIndex(this);validateColRefNo()" class="iNL"/>
										</td>
										<td align="center">
					        				<s:select name="colServiceDetailId" list="%{roomList}" value="serviceDetailId" listKey="key" listValue="value" headerKey="0" headerValue="[--Choose--]" onchange="setDetailIndex(this);validateColRoom()"/>
										</td>
										<%-- td>
											<input type="text" name="colDateFromTo" size="20" value="<s:property value="dateFromTo"/>" readonly="readonly" class="iDL"/>
										</td --%>
										<td align="center">
											<input type="text" name="colCustomerName" size="20" value="<s:property value="customerName"/>" readonly="readonly" class="iDL"/>
										</td>
										<td align="center">
											<input type="text" name="colAmount" size="10" maxlength="10" value="<s:property value="amount"/>" onchange="setDetailIndex(this);validateColAmount()" class="iNR" onkeypress="return text_OnKeyPress_NumberOnlyAndDot();"/>
										</td>
										<td style="display:inline;">
											<input type="hidden" name="colPaymentMethodName" value="<s:property value="paymentMethodName"/>">
											<input type="hidden" name="colServicePaymentDetailId" value="<s:property value="servicePaymentDetailId"/>">
											<input type="hidden" name="colShiftTransId" value="<s:property value="shiftTransId"/>">
										</td>
                       				</tr>
									</s:if>
									<s:else>
									<tr bgcolor="#E2E2E2">	
										<td align="center"></td>
										<td align="center"><s:property value="paymentLineNum" /></td>
										<td align="center">
											<s:property value="paymentMethodName"/>
									        <s:select cssStyle="display:none;" name="colPaymentMethodId" list="%{paymentMethodList}" value="paymentMethodId" listKey="key" listValue="value" onchange="setDetailIndex(this);validateColPaymentMethod()"/>
										</td>
										<td align="center">
											<s:property value="refNo"/>										
											<input type="text" style="display:none;" name="colRefNo" size="10" maxlength="10" value="<s:property value="refNo"/>" onchange="setDetailIndex(this);validateColRefNo()" class="iNL"/>
										</td>
										<td align="center">
											<s:if test="serviceDetailId > 0">
												<s:property value="roomNo"/> (<s:property value="dateFromTo"/>)
											</s:if>
					        				<s:select cssStyle="display:none;" name="colServiceDetailId" list="%{roomList}" value="serviceDetailId" listKey="key" listValue="value" headerKey="0" headerValue="[--Choose--]" onchange="setDetailIndex(this);validateColRoom()"/>
										</td>
										<%-- td>
											<input type="text" name="colDateFromTo" size="20" value="<s:property value="dateFromTo"/>" readonly="readonly" class="iDL"/>
										</td --%>
										<td align="center">
											<s:property value="customerName"/>
											<input type="text" style="display:none;" name="colCustomerName" size="20" value="<s:property value="customerName"/>" readonly="readonly" class="iDL"/>
										</td>
										<td align="center">
											<input type="text" name="colAmount" size="10" maxlength="10" value="<s:property value="amount"/>" onchange="setDetailIndex(this);validateColAmount()" class="iDR" readonly="readonly" onkeypress="return text_OnKeyPress_NumberOnlyAndDot();"/>
										</td>
										<td style="display:inline;">
											<input type="hidden" name="colPaymentMethodName" value="<s:property value="paymentMethodName"/>">
											<input type="hidden" name="colServicePaymentDetailId" value="<s:property value="servicePaymentDetailId"/>">
											<input type="hidden" name="colShiftTransId" value="<s:property value="shiftTransId"/>">
										</td>
									</tr>
									</s:else>
									</s:iterator>
                       			</tbody>
								<tr class="tHead">
									<td colspan="6" align="right"><s:label key="reserve.room.payment.total" /></td>
									<td align="right"><span id="sumAmount"><s:property value="reservePaymentVO.sumAmount" /></span></td>
								</tr>
                        		</table>
                        		</div>
                        	</td>
                        </tr>
						<tr style="display:none;">
						    <td id="templatePaymentMethod">
						        <s:select name="colPaymentMethodId" list="%{paymentMethodList}" listKey="key" listValue="value" onchange="setDetailIndex(this);validateColPaymentMethod()"/>
						    </td>
						    <td id="templateRoom">
						        <s:select name="colServiceDetailId" list="%{roomList}" listKey="key" listValue="value" headerKey="0" headerValue="[--Choose--]" onchange="setDetailIndex(this);validateColRoom()"/>
						    </td>
						</tr>
                        <tr>
                        	<td colspan="2" style="padding-top: 32px; padding-bottom: 10px">
                        		<table align="center" bgcolor="#FFFFFF" style="border: 1px solid #555555" width="65%">
		                        <tr height="35">
		                        	<td width="25%" align="right"><s:label key="reserve.room.payment.totalamount" /></td>
		                        	<td width="20%">
		                        		<s:textfield id="totalAmt" name="reservePaymentVO.totalAmt" value="%{reservePaymentVO.sumTotalAmount}" cssClass="iDR" readonly="true" size="10"/>
		                        	</td>
		                        	<td width="20%" align="right"><s:label key="reserve.room.payment.extraamt" /></td>
		                        	<td width="35%">
		                        		<s:textfield id="extraAmt" name="reservePaymentVO.extraAmt" value="%{reservePaymentVO.sumExtraAmount}" cssClass="iDR" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
		                        <tr height="35">
		                        	<td align="right"><s:label key="reserve.room.payment.tip" /></td>
		                        	<td>
		                        		<s:textfield id="tip" name="reservePaymentVO.tip" cssClass="iNR" size="10" maxlength="11" onchange="validatePaymentTip();" onkeypress="return text_OnKeyPress_NumberOnlyAndDot();"/>
		                        	</td>
		                        </tr>
		                        <tr height="35">
		                        	<td align="right"><s:label key="reserve.room.payment.discountamt" /></td>
		                        	<td>
		                        		<s:textfield id="discountAmt" name="reservePaymentVO.discountAmt" cssClass="iDR" readonly="true" size="10"/>
		                        	</td>
		                        	<td align="right"><s:label key="reserve.room.payment.authorizedby" /></td>
		                        	<td>
		                        		<s:textfield id="authorizedByName" name="reservePaymentVO.authorizedByName" readonly="true" size="8"
		                        					 cssStyle="border: 1px solid #222222; background-color: #EEEEEE" />&nbsp;
		                        		<input type="button" value="<s:text name="reserve.room.payment.button.discount" />" onclick="gotoDiscountPopup()"
			                        		   style="border: 1px solid #222222; background-color: #FFBBBB; height: 20px" />
		                        	</td>
		                        </tr>
		                        <tr height="35">
		                        	<td align="right"><font color="red"><s:label key="reserve.room.payment.remainingamt" /></font></td>
		                        	<td>
		                        		<s:textfield id="remainingAmt" name="reservePaymentVO.remainingAmt" cssClass="iDR_R" readonly="true" size="10"/>
		                        	</td>
		                        	<td style="display:none;"><font color="red"><s:label key="reserve.room.payment.changeamt" /></font></td>
		                        	<td style="display:none;">
		                        		<s:textfield id="changeAmt" name="reservePaymentVO.changeAmt" cssClass="iDR_R" readonly="true" size="10"/>
		                        	</td>
		                        </tr>
								</table>
							</td>
						</tr>
                        <tr>
                        	<td align="left" style="padding-left: 155px">
								<s:label key="reserve.error.confirmpayment.notallcheckout" id="msgErrorNotAllCheckout" cssStyle="display:none;"/>                        		
								<s:label key="reserve.error.amountmorethanzero" id="msgAmountMorethanZero" cssStyle="display:none;"/>
								<s:label key="reserve.error.amountequalszero" id="msgAmountEqualsZero" cssStyle="display:none;"/>								
								<s:label key="reserve.room.payment.error.duplicatepayment" id="msgErrorDuplicatePayment" cssStyle="display:none;"></s:label>
								
                        		<s:hidden id="shiftTransId" name="shiftTransId" />
                        		<s:hidden id="serviceHeaderId" name="reservePaymentVO.serviceHeaderId" />
                        		<s:hidden id="servicePaymentId" name="reservePaymentVO.servicePaymentId" />
                        		<s:hidden id="authorizedBy" name="reservePaymentVO.authorizedBy" />
                        		<s:hidden id="arrServiceDetailId" name="reservePaymentVO.arrServiceDetailId" />
                        		<s:hidden name="flagSave" id="flagSave"/>
                        		<s:hidden name="flagConfirm" id="flagConfirm"/>
								<sx:submit key="reserve.room.payment.button.ok" indicator="reservePaymentIndicator" id="btnSavePayment" 
								   		   targets="reservePaymentDIV" href="reservePayment_save.action" beforeNotifyTopics="/beforeSaveReservePayment"
								   		   cssStyle="border: 1px solid #222222">
								</sx:submit>
								<input type="button" value="<s:text name="reserve.room.payment.button.cancel" />" onclick="window.close()" style="border: 1px solid #222222" />
								<img id="reservePaymentIndicator" src="${pageContext.request.contextPath}/images/indicator.gif" alt="Loading..." style="display:none"/>
                        	</td>
                        	<td align="right" style="padding-right: 155px">
								<sx:submit key="reserve.room.payment.button.confirmPay" indicator="reservePaymentIndicator" id="btnConfirmPayment" 
								   		   targets="reservePaymentDIV" href="reservePayment_confirm.action" beforeNotifyTopics="/beforeConfirmReservePayment"
								   		   cssStyle="border: 1px solid #222222">
								</sx:submit>
                        	</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </s:form>   
        
<s:url id="refreshReserveInfoRoomURL" value="refreshReserveInfoRoom.action?" />
<sx:div id="refreshReserveInfoRoomDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="true"
        href="%{refreshReserveInfoRoomURL}" refreshOnShow="true"></sx:div>          
</sx:div>
